<template>
  <view class="avatar-group">
    <view
      v-for="(item, index) in showUrl"
      :key="index"
      class="avatar-group__item"
      :style="{
        marginLeft: index === 0 ? 0 : sheep.$helper.addUnit(-size * gap,'rpx')
      }"
    >
      <view class="ss-overflow-h" :style="[avatarStyle]">
        <image :src="isObject(item) ? keyName && item[keyName] || item.url : item" alt="" style="width: 100%;height: 100%;" :mode="mode" />
      </view>
      <view v-if="showMore && index === showUrl.length - 1 && (urls.length > maxCount || extraValue > 0)" class="avatar-group__item__show-more" @tap="clickHandler">
        <text :style="{fontSize:-size* 0.4 +'rpx'}">+{{ extraValue || urls.length - showUrl.length }}</text>
      </view>
    </view>
  </view>
</template>
<!-- urls	头像图片组	Array	[]	-
maxCount	最多展示的头像数量	String | Number	5	-
shape	头像形状	String	circle	square
mode	图片裁剪模式	String	aspectFill	-
showMore	超出maxCount时是否显示查看更多的提示	Boolean	true	-
size	头像大小	String | Number	40	-
keyName	指定从数组的对象元素中读取哪个属性作为图片地址	String	-	-
gap	头像之间的遮挡比例（0.4代表遮挡40%）	String | Number	0.5	-
extraValue	需额外显示的值，如设置则优先于内部的urls.length - maxCount值	String | Number	-	- -->
<script setup>
import sheep from '@/sheep'
import { isEmpty, isObject } from 'lodash-es'
import { computed } from 'vue'

const props = defineProps({
  urls: {
    type: Array,
    default: () => []
  },
  maxCount: {
    type: Number,
    default: 3
  },
  keyName: {
    type: String,
    default: undefined
  },
  showMore: {
    type: Boolean,
    default: true
  },
  round: {
    type: Number,
    default: 140
  },
  size: {
    type: Number,
    default: 60
  },
  mode: {
    type: String,
    default: 'aspectFill'
  },
  gap: {
    type: Number,
    default: 0.5
  },
  extraValue: {
    type: String,
    default: undefined
  }
})

const showUrl = computed(() => {
  return props.urls.slice(0, props.maxCount)
})

const avatarStyle = computed(() => {
  return {
    width: props.size + 'rpx',
    height: props.size + 'rpx',
    borderRadius: props.round + 'rpx',
    border: '1px solid #fff'
		
  }
})
</script>

<style lang="scss" scoped>
.avatar-group{
	display: flex;
}
.avatar-group__item{
	margin-left: -10px;
	position: relative;
}
.avatar-group__item:first-child{
	margin-left: 0;
}
.avatar-group__item__show-more{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100px;
	color:#fff;
}
</style>
